<template>
	<cu-custom bgColor="" :isBack="true">
		<template #title>添加日程</template>
	</cu-custom>
	<view class="page-content ">
		<view class="form-group theme-shadow mb-3">
			<view class="cu-form-group">
				<view class="title">标题</view>
				<input placeholder="请输入标题" name="input" v-model="title" style="text-align: right;" />
			</view>
			<view class="cu-form-group">
				<view class="title">学校</view>
				<picker @change="handleSchool" :value="schoolIndex" :range="schoolList">
					<view class="picker" :style="{
						color: schoolIndex > -1 ? '#1d1d1d' : '#999'
					}">
						{{schoolIndex > -1 ? schoolList[schoolIndex] : '请选择学校'}}
					</view>
				</picker>
				<!-- <input placeholder="请输入学校" name="input" v-model="schoolName" /> -->
			</view>
		</view>
		
		<view class="form-group theme-shadow mb-4">
			<view class="cu-form-group">
				<view class="title">开始时间</view>
				<view class="timepicker">
					<xp-picker :year-range="yearRange" mode="ymd" @confirm="starttimeChange">
						<view class="picker-text">
							<text class="text-gray">{{ starttime }}</text>
						</view>
					</xp-picker>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">结束时间</view>
				<view class="timepicker">
					<xp-picker :year-range="yearRange" mode="ymd" @confirm="endtimeChange">
						<view class="picker-text">
							<text class="text-gray">{{ endtime }}</text>
						</view>
					</xp-picker>
				</view>
			</view>
		</view>
		
		<view>
			<CuButton :disabled="btndisabled" @click="handleSubmit">确认添加</CuButton>
		</view>
	</view>
	
	
	
</template>

<script setup lang="ts">
import { onMounted, ref, type Ref } from "vue"
import CuButton from "@/components/CuButton.vue"
import { addSchedule } from "@/api/schedule.js"
import { router } from "@/router"
import { getSchool } from "@/api/school.js"
import store from "@/store/index.js"

const title:Ref<string> = ref("")
const schoolName:Ref<string> = ref("")
const starttime:Ref<string> = ref("请选择时间")
const endtime:Ref<string> = ref("请选择时间")
const yearRange:Ref<[number, number]> = ref([2023, 2024] as [number, number])
const btndisabled:Ref<boolean> = ref(false)
const schoolList:Ref<string[]> = ref([] as string[])
const schoolIndex:Ref<number> = ref(-1)


const handleSchool = (e:any):void => {
	schoolIndex.value = e.detail.value
}
const starttimeChange = (e:any):void => {
	starttime.value = e.value
}

const endtimeChange = (e:any):void => {
	endtime.value = e.value
}
const handleSubmit = ():void => {
	if (!title.value || !starttime.value || !endtime.value) {
		uni.showToast({
			icon: "none",
			title: "请输入完整的日程信息"
		})
		return
	}
	
	btndisabled.value = true
	
	uni.showLoading({
		title: "加载中"
	})
	addSchedule({
		superintendentId: 2,
		type: 2,
		title: title.value,
		schoolName: schoolList.value[schoolIndex.value],
		startTime: starttime.value,
		endTime: endtime.value
	}).then((res) => {
			uni.hideLoading()
			uni.showToast({
				icon: "success",
				title: "添加成功"
			})
			router.back()
		})
		.catch((err) => {
			console.log(err)
		})
}

const init = () => {
	getSchool()
		.then((res:any) => {
			const { data } = res
			data.map((school) => {
				schoolList.value.push(school.name)
			})
		})
}

onMounted(() => {
	const date = new Date
	const currentYear = date.getFullYear()
	yearRange.value = [currentYear, currentYear + 1]
	init()
})
</script>

<style lang="stylus" scoped>
.form-group
	border-radius 12rpx
	overflow: hidden
	>>> .picker-text
		justify-content: flex-end
.picker-text
	min-width: 420rpx
	display: flex
	justify-content: flex-start
	align-items: center
		
</style>